<template>
	<view class="container">
		<!-- 顶部统计卡片 -->
		<view class="stats-cards">
			<view class="stat-card">
				<text class="stat-number">{{vehicleCount}}</text>
				<text class="stat-label">车辆总数</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{useCount}}</text>
				<text class="stat-label">使用中</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{vehicleCount-useCount}}</text>
				<text class="stat-label">空闲中</text>
			</view>
		</view>

		<!-- 快捷操作按钮 -->
		<view class="quick-actions">
			<view class="action-btn" @click="navigateTo('/pages/apply/apply')">
				<uni-icons type="plusempty" size="20" color="#fff"></uni-icons>
				<text>用车申请</text>
			</view>
			<view class="action-btn" @click="navigateTo('/pages/cost/cost')">
				<uni-icons type="compose" size="20" color="#fff"></uni-icons>
				<text>费用填报</text>
			</view>
		</view>

		<!-- 最近申请记录 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">最近申请</text>
				<text class="more" @click="viewMore">更多 ></text>
			</view>
			<view class="apply-list">
				<view class="apply-item" v-for="(item, index) in applyList" :key="index">
					<view class="apply-info">
						<text class="apply-title">{{getVehicleName(item.vehicleId)}}</text>
						<text class="apply-time">{{item.usageTime}}</text>
					</view>
					<text class="apply-status" :class="item.checkStatus==0?'pending':'approved'">{{item.checkStatus == 0 ? '待审批' : '已审批'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getDataList, getTripList } from '@/api/data'

const vehicleCount = ref(0)
const useCount = ref(0)
const getVehicleList = ref([])
const applyList = ref([])
const userId = uni.getStorageSync('userId')

// 获取数据
const getVehicleName = (vehicleId) => {
	const vehicle = getVehicleList.value.find(v => v.vehicleId === vehicleId)
	return vehicle ? vehicle.licensePlate : '-'
}

const getData = async () => {
	try {
		const res = await getDataList()
		if (res.code === 200) {
			vehicleCount.value = res.data.vehicleAllCount
			useCount.value = res.data.useCount
			getVehicleList.value = res.data.vehicleInfoList
		} else {
			throw new Error(res.message || '获取数据失败')
		}
	} catch (error) {
		console.error('获取数据失败：', error)
		uni.showToast({
			title: error.message || '获取数据失败',
			icon: 'none'
		})
		throw error
	}
}

const getApplyList = async () => {
	try {
		const res = await getTripList({
			pageSize: 1,
			pageNum: 5,
			userId: userId
		})

		if (res.code === 200) {
			applyList.value = res.data.records
		} else {
			throw new Error(res.message || '获取申请列表失败')
		}
	} catch (error) {
		console.error('获取申请列表失败：', error)
		uni.showToast({
			title: error.message || '获取申请列表失败',
			icon: 'none'
		})
		throw error
	}
}

// 下拉刷新处理函数
const onPullDownRefresh = async () => {
	try {
		// 使用 Promise.allSettled 确保所有请求都完成
		const results = await Promise.allSettled([getData(), getApplyList()])
		
		// 检查是否所有请求都成功
		const allSuccess = results.every(result => result.status === 'fulfilled')
		
		if (allSuccess) {
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: '部分数据刷新失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('刷新失败：', error)
		uni.showToast({
			title: '刷新失败',
			icon: 'none'
		})
	} finally {
		// 确保在所有操作完成后停止刷新动画
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 300)
	}
}

// 页面跳转
const navigateTo = (url) => {
	uni.navigateTo({ url })
}

// 查看更多
const viewMore = () => {
	uni.navigateTo({
		url: '/pages/my-apply/my-apply'
	})
}

// 初始化数据
onMounted(async () => {
	try {
		await Promise.all([getData(), getApplyList()])
	} catch (error) {
		console.error('初始化数据失败：', error)
	}
})

defineExpose({
	onPullDownRefresh
})
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
}

.stats-cards {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.stat-card {
	background-color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
	width: 30%;
	text-align: center;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.stat-number {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
	margin-top: 10rpx;
	display: block;
}

.section {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.more {
	font-size: 24rpx;
	color: #999;
}

.apply-list {
	background-color: #fff;
	border-radius: 10rpx;
}

.apply-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.apply-item:last-child {
	border-bottom: none;
}

.apply-info {
	display: flex;
	flex-direction: column;
}

.apply-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
}

.apply-time {
	font-size: 24rpx;
	color: #999;
}

.apply-status {
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.apply-status.pending {
	background-color: #e6f7ff;
	color: #1890ff;
}

.apply-status.approved {
	background-color: #f6ffed;
	color: #52c41a;
}

.apply-status.rejected {
	background-color: #fff2f0;
	color: #ff4d4f;
}

.quick-actions {
	display: flex;
	justify-content: space-around;
	padding: 30rpx 0;
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.action-btn {
	display: flex;
	align-items: center;
	background-color: #007AFF;
	padding: 20rpx 40rpx;
	border-radius: 30rpx;
	color: #fff;
}

.action-btn text {
	margin-left: 10rpx;
	font-size: 28rpx;
}
</style>
